<template>
  <div>
    <el-form inline :model="searchDTO">
      <el-form-item label="关键字">
        <el-input v-model="searchDTO.keyWord"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchDTO.state" placeholder="选择状态">
          <el-option label="全部" :value="-1"/>
          <el-option label="待审核" :value="0"/>
          <el-option label="审核通过" :value="1"/>
          <el-option label="审核不通过" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDialog=true">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="homeAdvList">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <el-avatar :src="$imgBaseUrl+scope.row.pic" shape="square"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="点击数量" prop="clickCount"></el-table-column>
      <el-table-column label="广告链接" prop="url"></el-table-column>
      <el-table-column label="关联商品" prop="skuId"></el-table-column>
      <el-table-column label="备注" prop="note"></el-table-column>
      <el-table-column label="发布者" prop="publisherId"
                       v-if="store.menuCodes.indexOf('inspect-homeAdv')"></el-table-column>
      <el-table-column label="审核者" prop="authId"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openModify(scope.row.id)">修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    记录：{{ searchDTO.total }}
    <el-divider direction="vertical"/>
    <el-pagination background layout="prev, pager, next" v-model:current-page="searchDTO.pageNum"
                   v-model:page-size="searchDTO.pageSize" :total="searchDTO.total"/>
  </div>
  <el-dialog
      v-model="modifyDialog"
      title="修改"
      width="500"
  >
    <div>
      <el-form :model="selectHomeAdv">
        <el-form-item label="名称">
          <el-input v-model="selectHomeAdv.name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              name="files"
              class="avatar-uploader"
              :action="$upFile"
              :limit="1"
              :data="fileInfoVo"
              :headers="header"
              :on-success="modifyUpSuccess"
          >
            <el-button>上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品ID" >
          <el-input v-model="selectHomeAdv.skuId"></el-input>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker
              v-model="selectHomeAdv.timeRange"
              type="datetimerange"
              :shortcuts="shortcuts"
              range-separator="To"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="状态" v-if="store.menuCodes.indexOf('system-homeAdv-inspect')!==-1">
          <el-select v-model="selectHomeAdv.status" placeholder="选择状态">
            <el-option label="待审核" value="0"/>
            <el-option label="审核通过" value="1"/>
            <el-option label="审核不通过" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" v-if="store.menuCodes.indexOf('system-homeAdv-inspect')!==-1">
          <el-input v-model="selectHomeAdv.note"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="modifyDialog = false">取消</el-button>
        <el-button type="primary" @click="submitModify">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="addDialog"
      title="新增"
      width="500"
      draggable
  >
    <div>
      <el-form :model="addHomeAdv" label-width="80">
        <el-form-item label="名称">
          <el-input v-model="addHomeAdv.name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              name="files"
              class="avatar-uploader"
              :action="$upFile"
              :limit="1"
              :data="fileInfoVo"
              :headers="header"
              :on-success="addUpSuccess"
          >
            <el-button>上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="绑定skuId">
          <el-input v-model="addHomeAdv.skuId"></el-input>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker
              v-model="addHomeAdv.timeRange"
              type="datetimerange"
              :shortcuts="shortcuts"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {getHomeAdvList, getHomeAdvById, inspectHomeAdv, applyHomeAdv} from '@/api/home/system/homeAdv'
import {useMenusStore} from "@/store/permission";
import {onMounted, reactive, ref} from "vue";
import {getToken} from "@/util/token/tokenUtil";

const store = useMenusStore()
let addDialog = ref(false)
let modifyDialog = ref(false)
let selectHomeAdv = ref({})
let searchDTO = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  keyWord: '',
  state: -1,
})
let homeAdvList = ref([])

let addHomeAdv = reactive({
  name: '',
  pic: '',
  startTime: '',
  endTime: '',
  url: '',
  timeRange: '',
  skuId:''
})
let fileInfoVo = ref({
  bucketName: 'system',
  folderName: 'homeAdv',
})

function openModify(homeAdvId) {
  getHomeAdvById(homeAdvId).then(res => {
    selectHomeAdv.value = res.data
    selectHomeAdv.value.timeRange = [selectHomeAdv.value.startTime, selectHomeAdv.value.endTime]
  }).finally(() => {
    modifyDialog.value = true
  })
}

function modifyUpSuccess(res) {
  selectHomeAdv.value.pic = res.data
}

function addUpSuccess(res) {
  addHomeAdv.pic = res.data
}

function getList() {
  getHomeAdvList(searchDTO).then(res => {
    homeAdvList.value = res.data.records
    searchDTO.total = res.data.total - 0
  })
}

function submitAdd() {
  addHomeAdv.startTime = addHomeAdv.timeRange[0]
  addHomeAdv.endTime = addHomeAdv.timeRange[1]
  applyHomeAdv(addHomeAdv).then(() => {
    getList()
    addDialog.value=false
  })
}

function submitModify() {
  inspectHomeAdv(selectHomeAdv.value).then(() => {
    getList()
    modifyDialog.value=false
  })
}
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
onMounted(() => {
  getList()
})
const header = {
  token: getToken('token')
}
</script>

<style scoped>

</style>
